<template>
	<view class="content">
		<view class="myincome-page-header">
			<mynavBar :title="title" :gps="gps" :bgcolor="bgColor" :backgrouncolor="backgrouncolor"></mynavBar>
		</view>
		<view class="content-body">
			<view class="content-title">
				<span>选择充值金额:</span>
			</view>
			<view class="content-money">
				<view class="content-money-list" :class="moneyindex==item.id?'content-money-listactive':''"
					v-for="(item,index) in money" :key="item.id" @click="changeindex(item.id,item.num)">
					<span>{{item.num}}&nbsp;¥</span>
				</view>
				<view class="content-money-listtwo" @click="moneychange">
					<input type="number" placeholder-style="color:#F09500" placeholder="请输入充值金额" v-model="moneyvalue"
						@confirm="okmoney" @input="okmoney">
				</view>
			</view>
			<view class="content-mymoney">
				<span>当前余额：{{ (mymoney/100).toFixed(2) }} </span>
			</view>
			<view class="content-btn" :style="btnvalue?'':'background-color: #ccc;'" @click="recharge">
				<span>确定充值&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&yen;{{btnvalue}}</span>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '充值详情',
				gps: '',
				backgrouncolor: '#fff',
				bgColor: 'rgba(165, 42, 42, 0)',
				mymoney: 0,
				btnvalue: '',
				moneyvalue: '',
				moneyindex: '',
				money: [{
					id: '1',
					num: 5
				}, {
					id: '2',
					num: 10
				}, {
					id: '3',
					num: 20
				}, {
					id: '4',
					num: 50
				}, {
					id: '5',
					num: 100
				}, ],
				userAssetsId: null
			};
		},
		onShow() {
			this.render()
		},
		methods: {
			//充值按钮事件
			recharge() {
				if (this.btnvalue >= 1) {
					this.$store.dispatch("remote/callActionflow", {
						actionflow_name: "支付_zion支付",
						payload: {
							pay_amount_cny: this.btnvalue * 100
						}
					}).then((res) => {
						console.log("1111111111", res)
						uni.requestPayment({
							"provider": "wxpay",
							...res.raw_data.data,
							success: (item) => {
								//判断用户是否存在
								if(this.userAssetsId){
									let moneyal = parseInt(this.mymoney) + parseInt(this.btnvalue * 100)
									console.log("数据相加", moneyal)
									
									this.$store.dispatch("remote/mutation", {
										operation: 'update_user_assets',
										where: {
											id: {
												_eq: this.userAssetsId
											}
										},
										_set: {
											balance: moneyal,
										},
										field_string: 'id type balance describe status'
									}).then(res => {
										if (res.returning[0]?.id) {
											console.log("测试添加金额", res)
											// 增加余额后添加记录
											this.$store.dispatch("remote/mutation", {
												operation: 'insert_user_assets_detail',
												objects: [{
													user_assets_user_assets: res.returning[0]?.id,
													change_val: parseInt(this.btnvalue * 100),
													init_val: parseInt(this.infoData?.balance),
													balance: moneyal,
													describe: '余额充值',
													blean: false,
													type: "获得"
												}],
											}).then(resw => {
												this.mymoney = moneyal
												console.log("创建记录成功", resw)
											})
										}
									
									}).catch(err => {
										console.log("测试添加金额失败", err)
									})
								}else{
									let rechargeValue = parseInt(this.btnvalue * 100)
									this.$store.dispatch("remote/mutation", {
										operation: "insert_user_assets",
										objects: [{
											user_user: uni.getStorageSync('userInfo').id,
											type: "cny",
											balance: rechargeValue,
											describe: "余额",
											status: "启用"
										}],
										field_string: `id balance`
									}).then(res => {
										console.log("测试添加金额", res)
										if (res.returning[0]?.id) {
											// 增加余额后添加记录
											this.$store.dispatch("remote/mutation", {
												operation: 'insert_user_assets_detail',
												objects: [{
													user_assets_user_assets: res.returning[0]?.id,
													change_val: res.returning[0]?.balance,
													init_val: 0,
													balance: res.returning[0]?.balance,
													describe: '余额充值',
													blean: false,
													type: "获得"
												}],
											}).then(resw => {
												this.mymoney = rechargeValue
												console.log("创建记录成功", resw)
											})
										}
									}).catch(err=>{
										console.log("测试添加详情失败", err)
									})
								}
							},
							fail: (e) => {
								console.log("全部返回", parseInt(this.mymoney) + parseInt(this.btnvalue))
							}
						})
					}).catch(err => {
						console.log("错误了", err)
					})
				} else {
					uni.showToast({
						title: '充值金额不得小于1',
						duration: 2000,
						icon: 'none'
					});
				}
			},
			render() {
				this.$store.dispatch("remote/query", {
					model: 'user_assets',
					isloading: false,
					where: {
						user_user: {
							_eq: uni.getStorageSync('userInfo').id
						}
					},
					field_string: 'id type balance describe status'
				}).then(res => {
					this.userAssetsId = res?.data?.id
					this.mymoney = res?.data?.balance
					console.log("获取用户余额", this.userAssetsId,this.mymoney)
				})
			},
			moneychange() {
				this.btnvalue = ''
				this.moneyindex = ''
			},
			okmoney(event) {

				this.btnvalue = event.detail.value
				console.log(this.btnvalue)
			},
			changeindex(inde, num) {
				this.btnvalue = num
				this.moneyindex = inde
				this.moneyvalue = ''
			}
		},
		onLoad() {
			//#ifdef MP-WEIXIN
			let arr = wx.getMenuButtonBoundingClientRect()
			this.gps = arr.top
			console.log("胶囊位置信息", arr);
			//#endif
			// this.timeval = Time(new Date())
			// this.render(this.selectindex)

		},
		onPageScroll(e) {
			//获取距离顶部距离
			const scrollTop = e.scrollTop;
			console.log("高度：", scrollTop)
			// 根据高度改变样式
			if (scrollTop < 99) {
				this.bgColor = 'rgba(247, 247, 247, 0)'

			} else if (scrollTop >= 99 && scrollTop < 150) {
				this.bgColor = 'rgba(247, 247, 247, 0.5)'
			} else if (scrollTop >= 150) {
				this.bgColor = 'rgba(247, 247, 247, 1)'
			}
		},
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;


		.myincome-page-header {
			width: 100%;
			height: 200rpx;
			// background-color: red;
		}

		.content-body {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;

			.content-title {
				font-size: 34rpx;
				font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
				font-weight: 700;
				color: #F09500;
				line-height: 42rpx;
				margin-bottom: 50rpx;
			}

			.content-money {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.content-money-listactive {
					background: #F09500;
					color: #fff !important;
					box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(101, 100, 219, 0.2);
					border: 2rpx solid #F09500;
				}

				.content-money-listtwo {
					width: 250rpx;
					height: 60rpx;
					box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(101, 100, 219, 0.2);
					border-radius: 48rpx 48rpx 48rpx 48rpx;
					opacity: 1;
					border: 2rpx solid #F09500;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 20rpx 10rpx;
					font-size: 24rpx;
					font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
					font-weight: 500;
					color: #F09500;
					line-height: 60rpx;
					text-align: center;
				}

				.content-money-list {
					width: 150rpx;
					height: 60rpx;
					box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(101, 100, 219, 0.2);
					border-radius: 48rpx 48rpx 48rpx 48rpx;
					opacity: 1;
					border: 2rpx solid #F09500;
					text-align: center;
					font-size: 24rpx;
					font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
					font-weight: 500;
					color: #F09500;
					line-height: 60rpx;
					margin: 20rpx 10rpx;
				}
			}

			.content-mymoney {
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
				font-weight: 500;
				color: #F09500;
				line-height: 60rpx;
				margin-top: 40rpx;

			}

			.content-btn {
				width: 600rpx;
				height: 70rpx;
				background: #F09500;
				border-radius: 80rpx 80rpx 80rpx 80rpx;
				font-size: 24rpx;
				font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
				font-weight: 700;
				color: #FFFFFF;
				line-height: 70rpx;
				margin: 0 auto;
				text-align: center;
				margin-top: 150rpx;
			}
		}


	}
</style>